<script setup lang='ts'>
import Button from '../../components/Button.vue';
import RightList from '../../components/RightList.vue';
import { ref, inject, onMounted, computed } from 'vue';
import { XbsjEarthUi } from "../../scripts/xbsjEarthUi";
import { defineAsyncComponent, shallowRef } from 'vue';
import { createSceneObjTreeItemFromJson } from "./esObj/fun";
import { getsceneObjNumfromSceneTree } from "../../scripts/general";

const xbsjEarthUi = inject('xbsjEarthUi') as XbsjEarthUi
const objType = ref<string>('')
const largeScreen = ref(true)

// 加载苏宁广场3D模型和中国14级地形
const loadSuningPlazaAndTerrain = () => {
    // 获取场景树
    const sceneTree = xbsjEarthUi.getSceneTree();
    if (!sceneTree) return;

    // 判断苏宁广场模型是否已经加载
    const existingModel = sceneTree.json.root.children?.find(item => {
        return item.sceneObj?.type === 'ES3DTileset' &&  item.name.includes('苏宁广场')
    });
    
    if (!existingModel) {
        // 如果不存在，创建新的模型
        const tileset = xbsjEarthUi.createSceneObject('ES3DTileset');
        if (tileset) {
            const sceneObjectIndex = getsceneObjNumfromSceneTree(xbsjEarthUi, 'ES3DTileset');
            tileset.name = '苏宁广场' + (sceneObjectIndex + 1);
            tileset.url = 'http://223.244.255.52:8090/SN_3D_Tiles/SN_3D_Tiles.json';
            tileset.position = [118.324570, 32.303468, 0];
            tileset.scale = [1, 1, 1];
            tileset.show = true;

            // 创建场景树项
            const json = JSON.parse(tileset.jsonStr);
            xbsjEarthUi.destroySceneObject(tileset);
            createSceneObjTreeItemFromJson(xbsjEarthUi, json);
        }
        const terrain = xbsjEarthUi.createSceneObject('ESTerrainLayer');
        if (terrain) {
            terrain.name = '中国14级地形';
            terrain.url = 'http://223.244.255.52:8090/china_11';
            terrain.index = 0
            // 创建场景树项
            const json = JSON.parse(terrain.jsonStr);
            xbsjEarthUi.destroySceneObject(terrain);
            createSceneObjTreeItemFromJson(xbsjEarthUi, json);
        }
    }
}

// 加载滁州学院机械楼模型
const loadChzuJXLTerrian = () => {
    // 获取场景树
    const sceneTree = xbsjEarthUi.getSceneTree();
    if (!sceneTree) return;

    // 判断苏宁广场模型是否已经加载
    const existingModel = sceneTree.json.root.children?.find(item => {
        return item.sceneObj?.type === 'ES3DTileset' &&  item.name.includes('滁州学院-机械楼')
    });

    if (!existingModel) {
        // 如果不存在，创建新的模型
        const tileset = xbsjEarthUi.createSceneObject('ES3DTileset');
        if (tileset) {
            tileset.name = '滁州学院-机械楼';
            tileset.maximumScreenSpaceError = 2;
            tileset.url = 'http://223.244.255.52:8090/Scene/Cesium.json';
            tileset.show = true;
            // 创建场景树项
            const json = JSON.parse(tileset.jsonStr);
            xbsjEarthUi.destroySceneObject(tileset);
            createSceneObjTreeItemFromJson(xbsjEarthUi, json);
        }
    }

}

// 加载视频融合
const loadVideoFusion = () => {
    // 获取场景树
    const sceneTree = xbsjEarthUi.getSceneTree();
    if (!sceneTree) return;
    // 判断视频融合是否已经加载
    const existingModel = sceneTree.json.root.children?.find(item => {
        return item.sceneObj?.type === 'ESVideoFusion' &&  item.name.includes('机械楼视频融合')
    });
    if (existingModel) return;

    const videoFusion = xbsjEarthUi.createSceneObject('ESVideoFusion');
    if (videoFusion) {
        const json = {
    "id": "1c017d3d-3136-4fbf-a82b-784c1ec6567f",
    "type": "ESVideoFusion",
    "position": [
        118.31044467913773,
        32.27948509076871,
        41.647332875015174
    ],
    "rotation": [
        -10.218222983633083,
        -58.20125375693798,
        0
    ],
    "name": "视频融合2",
    "collision": false,
    "far": 16.078667810746264,
    "videoStreamUrl": "http://localhost:8080/test.mp4"
}
        xbsjEarthUi.destroySceneObject(videoFusion);
        createSceneObjTreeItemFromJson(xbsjEarthUi, json);
    }
}

onMounted(() => {
    if (window.ue && window.ue.es) {
        largeScreen.value = false
    }
    
    // 定位到滁州市苏宁广场 (经度: 118.324570, 纬度: 32.303468)
    xbsjEarthUi.activeViewer?.flyIn([118.30712, 32.30607, 3000], [0, -90, 0], 3);

    // 加载苏宁广场3D模型和中国14级地形
    loadSuningPlazaAndTerrain();

    // 加载滁州学院南校区
    loadChzuJXLTerrian();

    // 加载视频融合
    loadVideoFusion();

})  

//火灾按钮
const fireObjectList: { type: string, zh: string, icon: string, leftButton: boolean, com: any }[] = [
    {
        type: 'esLocalCircle',
        zh: '圆',
        icon: 'yuan',
        leftButton: true,
        com: shallowRef(defineAsyncComponent(() => { return import('./esObj/EsLocalCircle.vue') }))
    },
    {
        type: 'esPolygonFence',
        zh: '电子围栏',
        icon: 'dianziweilan',
        leftButton: true,
        com: shallowRef(defineAsyncComponent(() => { return import('./esObj/EsPolygonFence.vue') }))
    },
    {
        type: 'esAlarm',
        zh: '报警',
        icon: 'baojing',
        leftButton: true,
        com: shallowRef(defineAsyncComponent(() => { return import('./esObj/EsAlarm.vue') }))
    },
    {
        type: 'esCellularGrid',
        zh: '元胞网格',
        icon: 'wapian',
        leftButton: true,
        com: shallowRef(defineAsyncComponent(() => { return import('./esObj/EsCellularGrid.vue') }))
    }
]
//交通按钮
const trafficObjectList: { type: string, zh: string, icon: string, leftButton: boolean, com: any }[] = [
    {
        type: 'esHeatMap',
        zh: '热力图',
        icon: 'yuan',
        leftButton: true,
        com: shallowRef(defineAsyncComponent(() => { return import('./esObj/EsHeatMap.vue') }))
    },
    {
        type: 'esVideoFusion',
        zh: '视频融合',
        icon: 'shipinronghe',
        leftButton: true,
        com: shallowRef(defineAsyncComponent(() => { return import('./esObj/EsVideoFusion.vue') }))
    }
]

const waterLoggingObjectList: { type: string, zh: string, icon: string, leftButton: boolean, com: any }[] = [
    {
        type: 'esDrawWater',
        zh: '积水',
        icon: 'dilishuimian',
        leftButton: true,
        com: shallowRef(defineAsyncComponent(() => { return import('./esObj/EsDrawWater.vue') }))
    }
]

const fireCom = computed(() => {
    return fireObjectList.find(item => item.type === objType.value)?.com.value
})

const trafficCom = computed(() => {
    return trafficObjectList.find(item => item.type === objType.value)?.com.value
})

const waterLoggingCom = computed(() => {
    let test = waterLoggingObjectList.find(item => item.type === objType.value);
    console.log(test);
    return test?.com.value
})

</script>


<template>
    <RightList :title="'火灾'" :isTop="true">
        <Button v-for="item in fireObjectList" :name="item.icon" :content="item.zh"
                :click="() => { objType === item.type ? objType = '' : objType = item.type }"
                :actived="objType === item.type" :left-button="item.leftButton"></Button>
        <component :is="fireCom" @close="objType = ''"></component>
    </RightList>
    <RightList :title="'交通'" :isTop="true">
        <Button v-for="item in trafficObjectList" :name="item.icon" :content="item.zh"
                :click="() => { objType === item.type ? objType = '' : objType = item.type }"
                :actived="objType === item.type" :left-button="item.leftButton"></Button>
        <component :is="trafficCom" @close="objType = ''"></component>
    </RightList>
    <RightList :title="'内涝'" :isTop="true">
        <Button v-for="item in waterLoggingObjectList" :name="item.icon" :content="item.zh"
                :click="() => { objType === item.type ? objType = '' : objType = item.type }"
                :actived="objType === item.type" :left-button="item.leftButton"></Button>
        <component :is="waterLoggingCom" @close="objType = ''"></component>
    </RightList>

</template>